<template>
    <div class="head">
        <van-nav-bar title="推广中心" left-arrow @click-left="onClickLeft" />
    </div>
    <div style="height: 50px;"></div>
    <div class="comment">
        <p id="detail" @click="jump('/particulars')">提现明细</p>
        <div class="price_com">
            <div class="price">
                <p>未提现</p>
                <p style="color: #019de9;font-size: 24px;">{{ userData.canwithdraw != null ? userData.audit : 0 }}</p>
            </div>
            <div class="price">
                <p>待审核</p>
                <p style="color: #019de9;font-size: 24px;">{{ userData.audit != null ? userData.commission : 0 }}
                </p>
            </div>
            <div class="price">
                <p>已提现</p>
                <p style="color: #019de9;font-size: 24px;">{{ userData.withdraw != null ? userData.commission : 0 }}
                </p>
            </div>
        </div>
        <div class="input" style="text-align: center;">
            <van-cell-group>
                <van-cell title="提现方式">
                    <template #right-icon>
                        <van-radio-group v-model="checked" direction="horizontal" @change="clear()">
                            <van-radio name="1">零钱</van-radio>
                            <van-radio name="2">银行卡</van-radio>
                        </van-radio-group>
                    </template>
                </van-cell>
            </van-cell-group>
            <div v-if="checked == 1">
                <van-cell-group>
                    <van-field v-model="price" type="number" label="提现金额" placeholder="请输入提现金额" />
                    <van-field v-model="price" type="number" label="实际到账" />
                </van-cell-group>

            </div>
            <div v-else>
                <van-cell-group>
                    <van-field v-model="fieldValue" is-link readonly label="选择银行" placeholder="请选择银行名称"
                        @click="showPicker = true" />
                    <van-popup v-model:show="showPicker" round position="bottom">
                        <van-picker :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
                    </van-popup>
                    <van-field v-model="bankCode" type="number" label="银行卡号" placeholder="请输入银行卡号" />
                    <van-field v-model="price" type="number" label="提现金额" placeholder="请输入提现金额" />
                    <van-field v-model="price" type="number" label="实际到账" />
                </van-cell-group>
            </div>
            <van-button color="linear-gradient(to right, #5f52f7, #7232dd)" style="margin-top: 40px;" size="normal"
                @click="requestPrice()">
                提交申请
            </van-button>
        </div>

    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { ref } from 'vue';
import axios from 'axios';
import { showToast } from 'vant';
const router = useRouter()
const onClickLeft = () => history.back();
let userId = sessionStorage.getItem('userId')
let scienceData = JSON.parse(sessionStorage.getItem('scienceData'))
const userData = ref({})
const price = ref()
const checked = ref('1');
const columns = [];
const fieldText = ref()
const fieldValue = ref('');
const bankCode = ref()
const showPicker = ref(false);

const onConfirm = ({ selectedOptions }) => {
    showPicker.value = false;
    fieldValue.value = selectedOptions[0].text;
    fieldText.value = selectedOptions[0].value
};
function jump(site) { //跳转事件
    router.push({
        path: site,
    })
}
axios({ //请求用户信息
    url: "/api/user/userinfo", // url
    params: {
        // 参数
        id: userId
    },
})
    .then(function (res) {
        console.log(res); // 成功回调
        userData.value = res.data.user
        console.log(userData.value);
    })
    .catch(function (err) {
        console.log(err); // 失败回调
    });
axios({ //请求银行数据
    url: "/api/personal/bank", // url
    params: {
        // 参数
    },
})
    .then(function (res) {
        console.log(res); // 成功回调
        let bank = {}
        for (let i = 0; i < res.data.data.length; i++) {
            bank.text = res.data.data[i].name
            bank.value = res.data.data[i].code
            columns.push({ ...bank })
        }
        console.log(columns);
    })
    .catch(function (err) {
        console.log(err); // 失败回调
    });

function clear() {
    price.value = ''
    bankCode.value = ''
    fieldValue.value = ''
    fieldText.value = ''
}
function requestPrice() {
    console.log(price.value);
    console.log(bankCode.value);
    console.log(fieldValue.value);
    if (price.value == '' || price.value == undefined) {
        showToast('请输入提现金额');
        return
    }
    if(checked.value == 2 && bankCode.value == '' || bankCode.value == undefined){
        showToast('请选择银行并输入银行卡号');
        return
    }
    if (bankCode.value != '' || bankCode.value != undefined && fieldValue == '') {
        showToast('请选择银行');
        return
    }
    axios({ //请求用户信息
        url: "/api/personal/apply", // url
        params: {
            // 参数
            userid: userId,
            scienceid: scienceData.id,
            username: userData.value.nickname,
            phone: userData.value.phone,
            money: price.value,
            reality: price.value,
            idcard: bankCode.value,
            bankname: fieldValue.value,
            bankcode: fieldValue.value
        },
    })
        .then(function (res) {
            console.log(res); // 成功回调
            showToast(res.data.msg);
            clear()
        })
        .catch(function (err) {
            console.log(err); // 失败回调
        });
}


</script>

<style scoped>
.head {
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
}

.comment {
    width: 100%;
    min-height: calc(100vh - 50px);
    height: auto;
    background-image: url("../assets/beijing.png");
    background-size: 100%;
    background-repeat: no-repeat;
    padding: 20px 5% 0;
}

#detail {
    text-align: end;
    line-height: 3;
}

.price_com {
    width: 100%;
    height: auto;
    background-color: white;
    border-radius: 10px;
    padding: 30px 0;
    padding-bottom: 20px;
    box-shadow: 2px 2px 2px #dedede;
    display: flex;
    justify-content: space-around;
}

.price {
    width: 30%;
    text-align: center;
}

.price p {
    line-height: 2;
}

.input {
    margin-top: 20px;
}
</style>